<template>
  <div class="state">
    <div class="top">
      <div class="left">
        <div class="battery">
          <div class="dc"><Electric :quantity="dianliang"></Electric></div>
          <div class="position">坐标：{{ coordinate }}</div>
        </div>
        <div class="speed">
          <div class="orientation">
            <div class="o-l">
              <div class="jt">
                <div class="in"></div>
                <div class="in1"></div>
                <div
                  class="iconfont icon-jitouzhaoxiang"
                  :style="{ '--deg': infoData.angle + 0 + 'deg' }"
                ></div>
                <div
                  class="round"
                  :style="{ '--deg': infoData.angle + 45 + 'deg' }"
                ></div>
              </div>
              <div class="title">机头朝向{{ infoData.angle }}°</div>
            </div>
            <div class="o-r">
              <div class="yt">
                <div class="in"></div>
                <div
                  class="iconfont icon-shexiangtou"
                  :style="{ '--deg': infoData.ytjd - 90 + 'deg' }"
                ></div>
                <div class="sj"></div>
                <div
                  class="round"
                  :style="{ '--deg': infoData.ytjd + 45 + 'deg' }"
                ></div>
              </div>
              <div class="title">云台角度{{ infoData.ytjd }}°</div>
            </div>
          </div>
          <div class="chart-box">
            <div class="spsd">
              <div id="spsd" class="ct"></div>
              <div class="title">水平速度</div>
            </div>
            <div class="czsd">
              <div id="czsd" class="ct"></div>
              <div class="title">垂直速度</div>
            </div>
          </div>
        </div>
        <div class="info">
          <div class="item" v-for="(item, index) in infoList" :key="index">
            <div class="icon" v-if="item.text">
              {{ item.text }}
            </div>
            <div class="iconfont" :class="item.icon" v-else></div>
            <div class="name">
              <span>{{ item.name }}： </span>
              <!-- <span>{{ item.value }} </span> -->
              <span class="value">{{ store.state.home[item.prop] }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="infos">
          <div class="box" v-for="(item, index) in topList" :key="index">
            <div class="in">
              <div class="icon">
                <i class="iconfont" :class="item.icon"></i>
              </div>
              <div class="data">
                <span class="name">{{ item.name }}</span>
                <!-- <span class="value">{{ item.value }}</span> -->
                <span class="value">{{ store.state.home[item.prop] }}</span>
              </div>
            </div>
          </div>
        </div>
        <video
          controls
          autoplay
          autopictureinpicture
          ref="videoPlayer"
          muted
          @play="onPlay"
          @error="onError"
        >
          <source src="@/assets/1.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
        <div class="panel">
          <div class="panel-footer"></div>
        </div>
      </div>
      <div class="rights">
        <div class="top">
          <div v-for="(item, index) in controlList" :key="index" class="item">
            <div class="name">{{ item.name }}：</div>
            <div class="list">
              <div
                v-for="(item1, index1) in item.children"
                :key="index1"
                class="item1"
                :class="{ active: activeList[index].id == item1.id }"
                @click="checkItem1(index, item1.id)"
              >
                {{ item1.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="eagle-eye" id="eagle-eye">
          <div class="info" ref="info"></div>
        </div>
      </div>
    </div>
    <div class="bottoms">
      <div class="line" id="line"></div>
      <div class="plan">
        <div class="round">
          <span
            class="num"
            v-for="(item, index) in numsArr"
            :key="index"
            :style="{ '--deg': item + 'deg' }"
            :class="{ hasline: index < numsArr.length / 2 }"
          >
            <span :style="{ '--deg': -item + 'deg' }" class="span">
              <span v-if="item != 0"> {{ item }}° </span>
              <span v-else style="color: #fff">N</span>
            </span>
          </span>
          <div
            :style="{ '--deg': infoData.angle - 90 + 'deg' }"
            class="iconfont icon-feihangmoshi"
          ></div>
        </div>
        <div class="round1">
          <span
            class="num"
            v-for="(item, index) in numsArr1"
            :key="index"
            :style="{ '--deg': item + 'deg' }"
          >
            <span :style="{ '--deg': -item + 'deg' }" class="span">
              <!-- <span v-if="item != 0"> {{ item }} </span> -->
              <span
                v-if="item == 0"
                class="hass"
                :style="{ '--deg': item + 'deg' }"
                >N</span
              >
              <span
                v-else-if="item == 45"
                class="hass"
                :style="{ '--deg': item + 'deg' }"
                >NE</span
              >
              <span
                v-else-if="item == 90"
                class="hass"
                :style="{ '--deg': item + 'deg' }"
                >E</span
              >
              <span
                v-else-if="item == 135"
                class="hass"
                :style="{ '--deg': item + 'deg' }"
                >SE</span
              >
              <span
                v-else-if="item == 180"
                class="hass"
                :style="{ '--deg': item + 'deg' }"
                >S</span
              >
              <span
                v-else-if="item == 225"
                class="hass"
                :style="{ '--deg': item + 'deg' }"
                >SW</span
              >
              <span
                v-else-if="item == 270"
                class="hass"
                :style="{ '--deg': item + 'deg' }"
                >W</span
              >
              <span
                v-else-if="item == 315"
                class="hass"
                :style="{ '--deg': item + 'deg' }"
                >NW</span
              >
              <span v-else>{{ item }}</span>
            </span>
          </span>
          <div
            :style="{ '--deg': infoData.angle - 90 + 'deg' }"
            class="iconfont icon-feihangmoshi"
          ></div>
          <div class="line-box">
            <div
              class="line"
              v-for="(item1, index1) in numsArr2"
              :key="index1"
              :style="{ '--deg': item1 - 2 + 'deg' }"
            ></div>
          </div>

          <div class="in"></div>
          <div class="box">
            <div class="box1"></div>
            <div class="box2"></div>
          </div>
        </div>
      </div>

      <div class="model">
        <div class="left">
          <div class="item">
            <span class="name">当前模式：</span>
            <span>
              <el-select
                allow-create
                clearable
                filterable
                v-model="model"
                placeholder="请选择时间分割方式"
              >
                <el-option
                  :label="item.name"
                  :value="item.id"
                  v-for="item in modelList"
                  :key="item.id"
                />
              </el-select>
            </span>
            <div class="button">确认修改</div>
          </div>

          <div class="item">
            <span class="name">速度：</span>
            <span> <el-input v-model="infoData.spsd"></el-input> </span>
            <div class="button">确认修改</div>
          </div>
          <div class="item">
            <span class="name">高度：</span>
            <span> <el-input v-model="infoData.height"></el-input> </span>
            <div class="button">确认修改</div>
          </div>
        </div>
        <div class="right">
          <div
            v-for="(item, index) in rigthBtn"
            :key="index"
            class="item"
            :class="{ ks: item.id == 1, active: currentId == item.id }"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  ref,
  onMounted,
  onUnmounted,
  inject,
  nextTick,
  watch,
  computed,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import Electric from "@/components/Electric.vue";
import * as echarts from "echarts";
import { useStore } from "vuex";
import moment from "moment";
const store = useStore();
const infoData = ref({
  angle: 90,
  ytjd: 90,
  spsd: 3.5,
  czsd: 3.5,
  height: 0,
});
const model = ref(1);
const speed = ref(1);
const modelList = [
  {
    name: "模式1",
    id: 1,
  },
  {
    name: "模式2",
    id: 2,
  },
  {
    name: "模式3",
    id: 3,
  },
];
const currentId = ref(3);

const rigthBtn = [
  {
    name: "开锁",
    id: 1,
  },
  {
    name: "返航",
    id: 2,
  },
  {
    name: "起飞",
    id: 3,
  },
  {
    name: "降落",
    id: 4,
  },
  {
    name: "悬停",
    id: 5,
  },
  {
    name: "继续",
    id: 6,
  },
];
setInterval(() => {
  // infoData.value.angle--;
  // infoData.value.ytjd++;
}, 100);

let numsArr = [];
let numsArr1 = [];
let numsArr2 = [];
for (let i = 0; i < 360; i += 30) {
  numsArr.push(i);
}
for (let i = 0; i < 360; i += 15) {
  numsArr1.push(i);
}

for (let i = 0; i < 360; i += 45) {
  numsArr2.push(i);
}

let infoList = [
  {
    name: "高度",
    value: "",
    icon: "",
    text: "H",
    prop: "ldgd",
  },
  {
    name: "距离",
    value: "500",
    icon: "",
    text: "D",
    prop: "zjl",
  },
  {
    name: "上传信号",
    value: "未知",
    icon: "icon-shangchuanxinhao",
    prop: "scxh",
  },
  {
    name: "下载信号",
    value: "未知",
    icon: "icon-xiazaixinhao",
    prop: "xzxh",
  },
  {
    name: "卫星数量",
    value: "12",
    icon: "icon-weixing",
    prop: "wxnum",
  },
  {
    name: "推流状态",
    value: "未知",
    icon: "icon-tuiliu",
    prop: "tlzt",
  },
  {
    name: "飞行模式",
    value: "未知",
    icon: "icon-feihangmoshi",
    prop: "fxms",
  },
  {
    name: "罗盘状态",
    value: "未知",
    icon: "icon-ciluopan",
    prop: "zpzt",
  },
  {
    name: "RTK状态",
    value: "未知",
    icon: "icon-RTK",
    prop: "rptzt",
  },
  {
    name: "RTK卫星数量",
    value: "未知",
    icon: "icon-GPSRTK",
    prop: "rptnum",
  },
];
// 速度仪表盘

function initSpeed(spsd) {
  let spsdChart = echarts.init(document.getElementById("spsd"));

  var spsdOption = {
    tooltip: {
      formatter: "{a} <br/>{c} {b}",
    },
    series: [
      {
        name: "水平速度",
        type: "gauge",
        radius: "100%",
        min: 0,
        max: 300,
        startAngle: 240,
        endAngle: -60,
        splitNumber: 6,
        axisLine: {
          lineStyle: {
            width: 2,
            color: [
              [0.25, "#FF6E76"],
              [0.5, "#FDDD60"],
              [0.75, "#58D9F9"],
              [1, "#7CFFB2"],
            ],
          },
        },
        axisTick: {
          // 坐标轴小标记
          splitNumber: 6,
          length: 3, // 属性length控制线长
          lineStyle: {
            // 属性lineStyle控制线条样式
            color: "auto",
          },
          fontSize: 18.0,
          shadowColor: "rgba(0, 213, 255,1)",
          shadowBlur: 20,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
        },
        axisLabel: {
          fontSize: 10.0,
          color: "#fff",
        },
        splitLine: {
          // 分隔线
          length: 8, // 属性length控制线长
          lineStyle: {
            // 属性lineStyle（详见lineStyle）控制线条样式
            color: "auto",
          },
        },
        pointer: {
          width: 2,
        },
        title: {
          show: true,

          fontSize: 18,
          color: "#fff",
          // fontStyle: "italic",
          offsetCenter: ["0%", "-20%"],
        },
        detail: {
          show: true,
          show: true,
          offsetCenter: ["0%", "80%"],
          color: "red",
          fontSize: 18,
        },
        data: [{ value: spsd, name: "m/s" }],
      },
    ],
  };

  spsdChart.setOption(spsdOption);

  let czsdChart = echarts.init(document.getElementById("czsd"));

  var czsdOption = {
    tooltip: {
      formatter: "{a} <br/>{c} {b}",
    },

    series: [
      {
        name: "垂直速度",
        type: "gauge",
        radius: "100%",
        min: 0,
        max: 300,
        startAngle: 240,
        endAngle: -60,
        splitNumber: 6,

        axisLine: {
          lineStyle: {
            width: 2,
            color: [
              [0.25, "#FF6E76"],
              [0.5, "#FDDD60"],
              [0.75, "#58D9F9"],
              [1, "#7CFFB2"],
            ],
          },
        },
        axisTick: {
          // 坐标轴小标记
          splitNumber: 6,
          length: 3, // 属性length控制线长
          lineStyle: {
            // 属性lineStyle控制线条样式
            color: "auto",
          },
          fontSize: 18.0,
          shadowColor: "rgba(0, 213, 255,1)",
          shadowBlur: 20,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
        },
        axisLabel: {
          fontSize: 10.0,
          color: "#fff",
        },
        splitLine: {
          // 分隔线
          length: 8, // 属性length控制线长
          lineStyle: {
            // 属性lineStyle（详见lineStyle）控制线条样式
            color: "auto",
          },
        },
        pointer: {
          width: 2,
        },
        title: {
          show: true,

          fontSize: 18,
          color: "#fff",
          // fontStyle: "italic",
          offsetCenter: ["0%", "-20%"],
        },
        detail: {
          show: true,
          show: true,
          offsetCenter: ["0%", "80%"],
          color: "red",
          fontSize: 18,
        },
        data: [{ value: infoData.value.czsd, name: "m/s" }],
      },
    ],
  };

  czsdChart.setOption(czsdOption);

  window.addEventListener("resize", function () {
    spsdChart.resize();
    czsdChart.resize();
  });
  let numm = 1;
  // setInterval(function () {
  //   spsdOption.series[0].data[0].value =
  //     spsdOption.series[0].data[0].value + numm;

  //   numm++;
  //   spsdChart.setOption(spsdOption);
  // }, 1000);
}
// 视频上方
const topList = ref([
  {
    name: "地速(m/s)",
    icon: "icon-sudu",
    prop: "jl",
  },
  {
    name: "离地高度(m)",
    icon: "icon-gaodu",
    prop: "ldgd",
  },
  {
    name: "GPS信号",
    icon: "icon-satellite-signal-full",
    prop: "gps",
  },
  {
    name: "电压(v)",
    icon: "icon-lightning-full",
    prop: "dy",
  },
  {
    name: "信号强度",
    icon: "icon-xinhao",
    prop: "xh",
  },
]);
// 直播清晰度
const controlList = [
  {
    name: "直播清晰度",
    id: 1,
    children: [
      {
        name: "流畅",
        id: 11,
      },
      {
        name: "标清",
        id: 12,
      },
      {
        name: "高清",
        id: 13,
      },
      {
        name: "超清",
        id: 14,
      },
      {
        name: "自适应",
        id: 15,
      },
    ],
  },
  {
    name: "直播类型",
    id: 2,
    children: [
      {
        name: "广角",
        id: 21,
      },
      {
        name: "变焦",
        id: 22,
      },
      {
        name: "红外",
        id: 23,
      },
      {
        name: "热像",
        id: 7,
      },
      {
        name: "电视",
        id: 8,
      },
    ],
  },
  {
    name: "云台操控",
    id: 3,
    children: [
      {
        name: "拍照",
        id: 31,
      },
      {
        name: "录像",
        id: 32,
      },
    ],
  },
];
const activeList = ref([
  {
    id: 11,
  },
  {
    id: 21,
  },
  {
    id: 31,
  },
]);

const checkItem1 = (index, id) => {
  activeList.value[index].id = id;
};

const videoPlayer = ref(null);
function onPlay() {
  console.log("Video is playing");
}
function onError(event) {
  console.error("Video play error:", event);
}

import {
  viewerOptions,
  tokentoken,
  compassOptions,
} from "/public/config/cesiumConfig.js";

var viewer, addDataSource;
const info = ref(null);
const init = () => {
  Cesium.Ion.defaultAccessToken = tokentoken;
  viewer = new Cesium.Viewer("eagle-eye", viewerOptions);
  viewer._cesiumWidget._creditContainer.style.display = "none"; //去掉logo
  // viewer.sceneMode = Cesium.SceneMode.SCENE2D;

  viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
    url: "http://localhost:666/map/dixing",
    // url: "http://localhost:666/map/dem-china",
    requestVertexNormals: true, // 请求法线信息，如果不需要可以不要这个选项
    requestWaterMask: true, //一个布尔类型，表示是否请求水面遮罩信息
    hasVertexNormals: true, //只读布尔值，表示该地形提供器是否包含顶点法线信息
    hasWaterMask: true, //只读布尔值，表示该地形提供器是否包含水面遮罩信息
    errorEvent: true, //Event类型，当地形数据请求错误时触发
    availability: true, //定义地形数据可用性的TimeIntervalCollection对象
  });

  addDataSource = new Cesium.CustomDataSource("addDataSource");
  viewer.dataSources.add(addDataSource);
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(114, 30, 500000),
    duration: 1,
  });

  viewer.debugShowFramesPerSecond = true; //显示当前的帧率信息，这样你就可以实时观察到地图的渲染性能
  viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1; // 设置了摄像机的最小缩放距离
  viewer._cesiumWidget._creditContainer.style.display = "none"; //去掉logo
  viewer.scene.highDynamicRange = true;
  viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;
  var scene = viewer.scene;
  // viewer.scene.logarithmicDepthBuffer = true
  // 获取具有自定义鼠标样式的元素
  var element = scene.canvas;
  // 添加自定义鼠标样式的类名
  //   element.classList.add("custom-cursor");
  Cesium.Math.setRandomNumberSeed(3);
  viewer.scene.fxaa = true;
  viewer.scene.postProcessStages.fxaa.enabled = true;
  if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
    var vtxf_dpr = devicePixelRatio;
    // 适度降低分辨率
    while (vtxf_dpr >= 2.0) {
      vtxf_dpr /= 2.0;
    }
    viewer.resolutionScale = vtxf_dpr;
  }
  viewer._container.style.cursor = "pointer";

  // 鼠标滑过

  var ellipsoid = scene.globe.ellipsoid;
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  handler.setInputAction((movement) => {
    // var cartesian = scene.camera.pickEllipsoid(movement.endPosition, Cesium.Ellipsoid.WGS84) //位置数据转换只地理数据类型
    var cartesian = scene.camera.pickEllipsoid(movement.endPosition, ellipsoid); //位置数据转换只地理数据类型

    if (cartesian) {
      // console.log(movement.endPosition);
      //能获取，显示坐标
      var cartographic = ellipsoid.cartesianToCartographic(cartesian); //cesium函数转换至地理数据类型的经纬度
      var ray = viewer.camera.getPickRay(movement.endPosition);
      // console.log(ray);
      if (ray) {
        var cartesian1 = viewer.scene.globe.pick(ray, viewer.scene);
        if (cartesian1) {
          var cartographic = Cesium.Cartographic.fromCartesian(cartesian1);
          var height = cartographic.height; // 的值为地形高度
        }
      }
      // console.log(height);

      var coords =
        "经度：" +
        Cesium.Math.toDegrees(cartographic.longitude).toFixed(4) +
        " " +
        "纬度：" +
        Cesium.Math.toDegrees(cartographic.latitude).toFixed(4) +
        " " +
        "相机高度：" +
        Math.ceil(viewer.camera.positionCartographic.height) +
        " " +
        " 高程：" +
        height +
        "米";

      info.value.innerHTML = coords;
      info.value.style.display = "block";
    } else {
      info.value.style.display = "none";
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
};

const addModel = (data, dataSource, head) => {
  let position = data;

  let entity = dataSource.entities.getById("wrj");
  let color = Cesium.Color.RED;
  if (entity) {
    // viewer.trackedEntity = entity;
    viewer.camera.lookAt(position, new Cesium.Cartesian3(0, 0, 200000));
    entity.position = new Cesium.CallbackProperty(function () {
      return position;
    }, false); //防止闪烁，在移动的过程
    entity.billboard.rotation = new Cesium.CallbackProperty(function () {
      // return data.troopsType == 2 ? 80 : -data.heading * Math.PI / 180;
      return head ? head : 0;
    }, false); //防止闪烁，在移动的过程
  } else {
    entity = dataSource.entities.add({
      id: "wrj",
      position: position,
      show: true,
      label: {
        pixelOffset: new Cesium.Cartesian2(-30, -40), //此属性为设置偏移量
        text: "无人机",
        font: "8pt Source Han Sans CN", //字体样式
        // fillColor: new Cesium.Color.fromBytes(255, 0, 255, 255), //字体颜色
        fillColor: color, //字体颜色
        style: Cesium.LabelStyle.FILL, //label样式
        outlineWidth: 2,
        verticalOrigin: Cesium.VerticalOrigin.TOP, //垂直位置
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT, //水平位置
        show: false,
      },

      billboard: {
        // image: `/svg/${data.troopsType}.svg`,
        // image: `/svg/6.svg`,
        image: "/fj.png",
        scale: 1.5,
        // width: data.troopsType == 6 ? 15 : data.troopsType == 7 ? 12 : 20,
        // height: data.troopsType == 6 ? 15 : data.troopsType == 7 ? 12 : 20,
        // scaleByDistance: new Cesium.NearFarScalar(250000, 6.0, 1500000, 1),
        // color: Cesium.Color.fromCssColorString("#cc0000").withAlpha(0.8),
        width: 20,
        height: 20,
        rotation: head ? head : 0,
      },
      monitoItems: data,
      flag: 1,
    });
  }
};
var nowt = ref("");

const taskProgressArr = computed(() => {
  return store.state.home.task;
});
let coordinate = ref("");
//度转度°分′秒″
function ToDegrees(val, lon) {
  if (typeof val == "undefined" || val == "") {
    return "";
  }
  var i = val.indexOf(".");
  var strDu = i < 0 ? val : val.substring(0, i); //获取度
  var strFen = 0;
  var strMiao = 0;
  if (i > 0) {
    var strFen = "0" + val.substring(i);
    strFen = strFen * 60 + "";
    i = strFen.indexOf(".");
    if (i > 0) {
      strMiao = "0" + strFen.substring(i);
      strFen = strFen.substring(0, i); //获取分
      strMiao = strMiao * 60 + "";
      i = strMiao.indexOf(".");
      strMiao = strMiao.substring(0, i + 4); //取到小数点后面三位
      strMiao = parseFloat(strMiao).toFixed(2); //精确小数点后面两位
    }
  }
  let lo, la;
  if (lon == "lon") {
    if (val >= 0) {
      lo = "E";
    } else {
      lo = "W";
    }
    return strDu + "°" + strFen + "′" + strMiao + "″" + lo;
  } else if (lon == "lat") {
    if (val >= 0) {
      la = "N";
    } else {
      la = "S";
    }
    return strDu + "°" + strFen + "′" + strMiao + "″" + la;
  }

  // 经纬度表示法是：strDu°  strFen′ strMiao″，
}
const dianliang = ref(100);
watch(
  () => store.state.home.position,
  (val, pre) => {
    if (val) {
      addModel(val.position, viewer, val.head);
      var cartographic = Cesium.Cartographic.fromCartesian(val.position);
      let lon = Cesium.Math.toDegrees(cartographic.longitude);
      let lat = Cesium.Math.toDegrees(cartographic.latitude);
      let l = ToDegrees(lat.toString(), "lat");
      let a = ToDegrees(lon.toString(), "lon");
      coordinate.value = l + " " + a;

      infoData.value.angle = Number(val.jtcx.toFixed(2));
      infoData.value.height = val.ldgd;
      console.log(val.jl, 898989);
      dianliang.value = val.dianliang;
      if (val.jl) {
        initSpeed(Number(val.jl));
      } else {
        initSpeed(0);
      }
    }
  },
  {
    //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
    //那么首次执行，val为默认值,preVal为undefined
    // immediate: true,
    //这个参数代表监听对象时，可以监听深度嵌套的对象属性
    //比如message是一个对象的话，可以监听到message.a.b.c，也就是message下的所有属性
    deep: true,
  }
);

watch(
  () => store.state.home.task,

  (val, preVal) => {
    //val为修改后的值,preVal为修改前的值
    // console.log("message", val,)
    // console.log("message1", preVal,)
    if (val) {
      var controls = [];
      //   console.log(val, "时间");
      // nowt.value = val;
      var xAxis = ref([]);
      var yAxis1 = ref([]);
      var yAxis2 = ref([]);

      val.children.forEach((s) => {
        controls.push(Cesium.Cartesian3.fromDegrees(s.lon, s.lat, s.height));
        xAxis.value.push(s.startTime);
        yAxis1.value.push(s.height);

        // 使用Cesium的sampleTerrain函数查询高程
        var promise = Cesium.sampleTerrain(viewer.terrainProvider, 11, [
          Cesium.Cartographic.fromDegrees(Number(s.lon), Number(s.lat)),
        ]);

        promise
          .then(function (updatedPositions) {
            // updatedPositions 是Cartographic对象的数组
            if (updatedPositions.length > 0) {
              var elevation = updatedPositions[0].height; // 高程
              // console.log(
              //   "Elevation (Terrain): " +
              //     "经度：" +
              //     s.lon +
              //     "纬度：" +
              //     s.lat +
              //     "-----" +
              //     elevation +
              //     " 米"
              // );
              s.dxheight = elevation;
            } else {
              console.log("No elevation data available for this location.");
            }
          })
          .catch(function (error) {
            console.error(error);
          });
        yAxis2.value.push(s.dxheight);
        // 使用Cesium的sampleTerrainMostDetailed函数查询3D模型上的高程
      });

      initHeight(xAxis.value, yAxis1.value, yAxis2.value);
      let entit = viewer.entities.add({
        polyline: {
          positions: controls,
          width: 3,
          material: Cesium.Color.WHITE,
        },
      });
      viewer.zoomTo(entit);
    }
  },
  {
    //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
    //那么首次执行，val为默认值,preVal为undefined
    // immediate: true,
    //这个参数代表监听对象时，可以监听深度嵌套的对象属性
    //比如message是一个对象的话，可以监听到message.a.b.c，也就是message下的所有属性
    deep: true,
  }
);

// 高度折线图

function initHeight(x, y1, y2) {
  let heightChart = echarts.init(document.getElementById("line"));

  //   const y1 = [100, 100, 100, 200, 300, 400, 290, 380, 800, 100, 20, 30];
  // const y2 = [10, 50, 100, 20, 800, 40, 290, 190, 80, 0, 200, 730];

  // var y2 = [];

  const gdpUnit = "米";
  var option = {
    grid: {
      top: 50,
      left: 50,
      right: 10,
      bottom: 50,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        shadowStyle: {
          color: "rgba(81, 127, 253, 0.1)",
        },
        label: {
          show: false,
          color: "#517FFD",
          backgroundColor: "transparent",
          fontSize: 12,
        },
      },
      className: "my-tooltip-box",
    },
    legend: {
      data: ["海拔高度", "设备高度"],
      top: "0%",

      textStyle: {
        color: "auto",
        fontSize: 16,
      },
      icon: "rich",
      show: true,
      itemWidth: 18,
      itemHeight: 2,

      top: 8,
      right: 10,
      itemGap: 34,
    },
    xAxis: {
      data: x,
      axisLine: {
        show: true, // 隐藏X轴轴线
        lineStyle: {
          color: "rgba(221, 221, 221, 1)",
          width: 2,
        },
      },
      axisTick: {
        show: false, // 隐藏X轴刻度
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: "rgba(107, 107, 107, 1)", // X轴文字颜色
          fontSize: 12,
        },
      },
    },
    yAxis: [
      {
        type: "value",

        name: "单位：" + gdpUnit,
        nameTextStyle: {
          color: "rgba(107, 107, 107, 1)",
          padding: [0, 0, 0, 0],
          fontSize: 12,
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
          },
        },
        axisTick: {
          show: true,
        },
        axisLine: {
          show: true,
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "rgba(107, 107, 107, 1)",
            fontSize: 12,
          },
        },
      },
    ],
    series: [
      {
        stack: "Total",
        name: "海拔高度",
        type: "line",
        symbolSize: 6,
        smooth: true,
        itemStyle: {
          normal: {
            color: "rgba(60, 129, 255, 1)",
            lineStyle: {
              color: "rgba(60, 129, 255, 1)",
              width: 2,
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "rgba(113, 168, 252, 0)",
                },
                {
                  offset: 1,
                  color: "rgba(113, 157, 252, 0.5)",
                },
              ]),
            },
          },
        },
        data: y2,
      },
      {
        stack: "Total",
        name: "设备高度",
        type: "line",
        symbolSize: 6,
        smooth: true,
        itemStyle: {
          normal: {
            color: "rgba(160, 79, 226, 1)",
            lineStyle: {
              color: "rgba(160, 79, 226, 1)",
              width: 2,
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "rgba(206, 127, 255, 0)",
                },
                {
                  offset: 1,
                  color: "rgba(206, 127, 255, 0.5)",
                },
              ]),
            },
          },
        },
        data: y1,
      },
    ],
  };

  heightChart.setOption(option);

  window.addEventListener("resize", function () {
    heightChart.resize();
  });
}
onMounted(() => {
  init();
});
</script>
<style scoped lang="scss">
.state {
  width: 100%;
  height: 100%;
  border: 1px solid #1d4d52;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .top {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    height: 70%;

    .left {
      padding: 0 10px;
      // width: 320px;
      width: 350px;
      background: #000;
      // overflow: hidden;
      // border: 1px solid red;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      z-index: 2;
      .battery {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: space-between;
        .position {
          width: calc(100% - 90px);
          height: 100%;
          line-height: 25px;
          font-size: 12px;
        }
      }
      .speed {
        height: 360px;
        box-sizing: border-box;
        overflow: hidden;

        .orientation {
          height: 180px;
          overflow: hidden;

          display: flex;
          justify-content: space-between;
          // margin-bottom: 10px;

          .o-l {
            display: flex;
            flex-direction: column;
            // justify-content: space-between;
            align-items: center;

            .title {
              height: 20px;
              text-align: center;
              width: 100%;
              font-size: 16px;
            }

            .jt {
              width: 150px;
              height: 150px;
            }

            .jt {
              // 一层圈
              position: relative;
              text-align: center;
              line-height: 200px;
              border: 1px solid #50b3f0;
              border-radius: 50%;
              position: relative;

              .in {
                // 二层圈
                width: 80%;
                height: 80%;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                border-radius: 50%;
                border: 1px solid #50b3f0;

                // 底部三角
                &::before {
                  position: absolute;
                  content: "";
                  width: 10px;
                  height: 10px;
                  left: 50%;
                  bottom: -20%;
                  transform: translate(-50%, -50%);
                  width: 0;
                  height: 0;
                  border-top: 10px solid transparent;
                  border-right: 10px solid transparent;
                  border-bottom: 10px solid #8eb3b2;
                  border-left: 10px solid transparent;
                }

                // 顶部三角
                &::after {
                  position: absolute;
                  content: "";
                  width: 10px;
                  height: 10px;
                  left: 50%;
                  top: -20%;
                  transform: translate(-50%, 60%);

                  width: 0;
                  height: 0;
                  border-top: 10px solid #8eb3b2;
                  border-right: 10px solid transparent;
                  border-bottom: 10px solid transparent;
                  border-left: 10px solid transparent;
                  z-index: 200;
                }
              }

              .in1 {
                // 二层圈
                width: 80%;
                height: 80%;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);

                // 底部三角
                &::before {
                  position: absolute;
                  content: "";
                  width: 10px;
                  height: 10px;
                  left: 0%;
                  top: 50%;
                  transform: translate(-100%, -50%);
                  width: 0;
                  height: 0;
                  border-top: 10px solid transparent;
                  border-right: 10px solid transparent;
                  border-bottom: 10px solid transparent;
                  border-left: 10px solid #8eb3b2;
                }

                // 顶部三角
                &::after {
                  position: absolute;
                  content: "";
                  width: 10px;
                  height: 10px;
                  right: 0%;
                  top: 50%;
                  transform: translate(100%, -50%);

                  width: 0;
                  height: 0;
                  border-top: 10px solid transparent;
                  border-right: 10px solid #8eb3b2;
                  border-bottom: 10px solid transparent;
                  border-left: 10px solid transparent;
                  z-index: 200;
                }
              }

              // 扇形
              .round {
                position: absolute;
                left: 0;
                top: 0;
                transform: translate(-50%, -50%);
                width: 150px;
                height: 150px;
                border-radius: 50%;
                background: #669551;
                clip-path: polygon(0% 0%, 25% 0%, 50% 50%, 0% 25%);
                // transform: rotateZ(45deg);
                transform: rotateZ(var(--deg));
              }

              // 三层圈
              &::after {
                position: absolute;
                content: "";
                left: 50%;
                top: 50%;
                width: 60%;
                height: 60%;
                border-radius: 50%;
                transform: translate(-50%, -50%);
                border: 1px solid #50b3f0;
              }

              .iconfont {
                width: 100%;
                height: 100%;
                font-size: 20px;
                line-height: 150px;
                text-align: center;
                transform: rotateZ(var(--deg));

                // 内层圈
                &::after {
                  position: absolute;
                  content: "";
                  left: 50%;
                  top: 50%;
                  width: 40%;
                  height: 40%;
                  border-radius: 50%;
                  transform: translate(-50%, -50%);
                  border: 1px solid #50b3f0;
                }
              }

              .jtcx {
                width: 20px;
                height: 20px;

                // position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                transform: rotateZ(var(--deg));
              }
            }
          }

          .o-r {
            display: flex;
            flex-direction: column;
            // justify-content: space-between;
            align-items: center;

            .title {
              height: 20px;
              text-align: center;
              width: 100%;
              font-size: 16px;
            }

            .yt {
              width: 150px;
              height: 150px;
              border-radius: 50%;
              border: 1px solid #50b3f0;
              position: relative;

              &::before {
                position: absolute;
                content: "";
                width: 100%;
                height: 1px;
                background: #50b3f0;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
              }

              &::after {
                position: absolute;
                content: "";
                width: 1px;
                height: 100%;
                background: #50b3f0;
                left: 50%;
                top: 0;
                transform: translateX(-50%);
              }

              .in {
                width: 100%;
                height: 100%;

                // 底部三角
                &::before {
                  position: absolute;
                  content: "";
                  width: 10px;
                  height: 10px;
                  left: 0%;
                  top: 50%;
                  transform: translate(0%, -50%);
                  width: 0;
                  height: 0;
                  border-top: 10px solid transparent;
                  border-right: 10px solid transparent;
                  border-bottom: 10px solid transparent;
                  border-left: 10px solid #8eb3b2;
                }

                // 顶部三角
                &::after {
                  position: absolute;
                  content: "";
                  width: 10px;
                  height: 10px;
                  right: 0%;
                  top: 50%;
                  transform: translate(0%, -50%);

                  width: 0;
                  height: 0;
                  border-top: 10px solid transparent;
                  border-right: 10px solid #8eb3b2;
                  border-bottom: 10px solid transparent;
                  border-left: 10px solid transparent;
                  z-index: 200;
                }
              }

              .iconfont {
                position: absolute;
                width: 100%;
                height: 100%;
                // left: 50%;
                // top: 50%;
                top: 0;
                text-align: center;
                line-height: 150px;
                // transform: translate(-50%, -50%);
                font-size: 20px;
                transform: rotateZ(var(--deg));
              }

              .sj {
                width: 100%;
                height: 100%;

                position: absolute;
                left: 0;
                top: 0;

                // 底部三角
                &::before {
                  position: absolute;
                  content: "";
                  width: 10px;
                  height: 10px;
                  left: 50%;
                  top: 0%;
                  transform: translate(-50%, 0%);
                  width: 0;
                  height: 0;
                  border-top: 10px solid #8eb3b2;
                  border-right: 10px solid transparent;
                  border-bottom: 10px solid transparent;
                  border-left: 10px solid transparent;
                }

                // 顶部三角
                &::after {
                  position: absolute;
                  content: "";
                  width: 10px;
                  height: 10px;
                  left: 50%;
                  bottom: 0%;
                  transform: translate(-50%, 0%);

                  width: 0;
                  height: 0;
                  border-top: 10px solid transparent;
                  border-right: 10px solid transparent;
                  border-bottom: 10px solid #8eb3b2;
                  border-left: 10px solid transparent;
                  z-index: 200;
                }
              }

              // 扇形
              .round {
                position: absolute;
                left: 0;
                top: 0;
                transform: translate(-50%, -50%);
                width: 150px;
                height: 150px;
                border-radius: 50%;
                background: #669551;
                clip-path: polygon(0% 0%, 25% 0%, 50% 50%, 0% 25%);
                // transform: rotateZ(45deg);
                transform: rotateZ(var(--deg));
              }
            }
          }
        }

        .chart-box {
          display: flex;
          justify-content: space-between;
          height: 180px;
          overflow: hidden;

          .spsd,
          .czsd {
            width: 150px;
            height: 100px;

            .ct {
              width: 100%;
              height: 150px;
            }

            .title {
              height: 20px;
              text-align: center;
            }
          }
        }
      }

      .info {
        width: 100%;
        height: 220px;
        overflow: hidden;
        font-size: 12px;
        display: flex;
        flex-wrap: wrap;

        .item {
          padding: 0 20px;
          width: 50%;
          height: 40px;
          display: flex;
          align-items: center;

          .icon {
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background: linear-gradient(#3e8183, #3e8183) left top,
              linear-gradient(#3e8183, #3e8183) left top,
              linear-gradient(#3e8183, #3e8183) right top,
              linear-gradient(#3e8183, #3e8183) right top,
              linear-gradient(#3e8183, #3e8183) left bottom,
              linear-gradient(#3e8183, #3e8183) left bottom,
              linear-gradient(#3e8183, #3e8183) right bottom,
              linear-gradient(#3e8183, #3e8183) right bottom;
            background-repeat: no-repeat;
            // border: 1px solid #33cdfa;
            background-size: 1px 10px, 5px 1px;
          }

          .iconfont {
            color: #3e8183;
            font-size: 18px;
          }

          .name {
            margin-left: 20px;
            display: flex;
            flex-direction: column;
          }
        }
      }
    }

    .center {
      // width: calc(100% - 680px);
      height: 100%;
      height: 130%;
      background: #000;
      position: absolute;
      left: 350px;
      right: 360px;
      overflow: hidden;
      .infos {
        height: 100px;
        right: 7.5%;
        position: absolute;
        left: 0;
        top: 0;
        background: #000;
        display: flex;
        .box {
          margin: 20px;
          width: 200px;
          height: 60px;

          background-size: 55% 50%;
          background-repeat: no-repeat;
          position: relative;
          .in {
            width: 80%;
            height: 80%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            display: flex;
            box-shadow: 0 10px 10px -10px #54a8d2;
            background: linear-gradient(
              to top,
              #54a8d2 30%,

              transparent 100%
            );
            // justify-content: space-between;
            .icon {
              height: 100%;
              margin-right: 20px;
              .iconfont {
                font-size: 30px;
              }
            }
            .data {
              display: flex;
              flex-direction: column;

              .name {
                color: #48a1d9;
              }
              .value {
                font-size: 18px;
                font-weight: bold;
              }
            }
          }
          // filter: drop-shadow(1px 1px 2px #75d7f1);
        }
        .box::after {
          z-index: 1;
          width: calc(100% - 2 * 1px);
          height: calc(100% - 2 * 1px);
          content: "";
          display: block;
          background: linear-gradient(135deg, transparent 10px, #262c28 0) top
              left,
            linear-gradient(-135deg, transparent 0px, #262c28 0) top right,
            linear-gradient(-45deg, transparent 10px, #262c28 0) bottom right,
            linear-gradient(45deg, transparent 0px, #262c28 0) bottom left;
          background-size: 55% 51%;
          background-repeat: no-repeat;
          position: absolute;
          left: 1px;
          top: 1px;
        }
      }
      video {
        position: absolute;
        top: 50px;
        height: calc(100% - 10px);
        width: 100%;
      }
    }

    .rights {
      width: 320px;
      width: 450px;
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;

      .top {
        padding: 10px;
        height: 200px;
        background: #2b313f;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .item {
          flex-shrink: 0;
          display: flex;
          // border: 1px solid yellow;

          .name {
            flex-shrink: 0;
            width: 100px;
            height: 30px;
          }

          .list {
            display: flex;
            flex-wrap: wrap;

            .item1 {
              flex-shrink: 0;
              width: 50px;
              height: 30px;

              text-align: center;
              margin-left: 10px;
              margin-bottom: 10px;
              background: #2d333f;
              border-radius: 5px;
            }

            .active {
              background: #fff;
              color: #000;
            }
          }
        }
      }

      .eagle-eye {
        height: 340px;
        height: calc(100% - 200px);

        position: relative;

        .info {
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: 2;
          color: white;
        }
      }
    }
  }

  .bottoms {
    height: calc(100% - 620px);
    height: 29%;
    display: flex;
    border: 1px solid #3e8183;
    .line {
      height: 100%;
      width: 800px;
    }
    .plan {
      width: 420px;

      display: flex;
      align-items: center;
      justify-content: space-between;
      .round {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: #26333b;
        position: relative;
        // transform: rotateZ(-8deg);
        .iconfont {
          width: 100%;
          height: 100%;
          font-size: 20px;
          line-height: 200px;
          text-align: center;
          transform: rotateZ(var(--deg));
          font-size: 100px;
          color: red;
        }
        img {
          width: 120px;
          height: 120px;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          transform: rotate(var(--deg));
        }
        &::before {
          content: "";
          width: 80%;
          height: 80%;
          border: 1px dashed #305369;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
        }
        &::after {
          content: "";
          width: 40%;
          height: 40%;
          border: 1px dashed #305369;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
        }
        // display: flex;

        .num {
          display: inline-block;
          transform: rotateZ(var(--deg));
          // position: absolute;
          position: absolute; /* 让刻度绝对定位 */
          left: 50%;
          top: 0%;
          transform-origin: 0px 100px; /* 设置刻度旋转基点 为圆心*/

          .span {
            display: inline-block;
            // transform: rotate(50deg);
            transform: rotateZ(var(--deg));
            font-size: 12px;
            margin-left: -8px;
            color: #4fb3f0;
          }
        }
        .hasline {
          background: #305369;
          width: 1px;
          height: 100%;
        }

        .in {
        }
      }
      .round1 {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: #26333b;
        position: relative;
        overflow: hidden;

        .in {
          width: 70%;
          height: 70%;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);

          border-radius: 50%;
          overflow: hidden;
          &:before {
            width: 100%;
            height: 50%;
            content: "";
            position: absolute;
            background-color: #489bcd;
            left: 0;
            top: 0;
            z-index: 1;
          }
          &:after {
            width: 100%;
            height: 50%;
            content: "";
            position: absolute;
            background-color: transparent;
            left: 0;
            bottom: 0;
            z-index: 1;
          }
        }
        .hasline {
          background: red;
          width: 1px;
          height: 20px;
          position: absolute;
          left: 120%;
          top: 30%;
        }

        .num {
          display: inline-block;
          transform: rotateZ(var(--deg));
          // position: absolute;
          position: absolute; /* 让刻度绝对定位 */
          left: 50%;
          top: 0%;
          transform-origin: 0px 100px; /* 设置刻度旋转基点 为圆心*/
          font-size: 10px;
          color: #4fb3f0;
          .span {
            display: inline-block;
            // transform: rotate(50deg);
            transform: rotateZ(var(--deg));

            margin-left: -8px;
          }
          .hass {
            color: #fff;
            font-size: 12px;
            position: relative;
            display: inline-block;
          }
        }
        .line-box {
          border-radius: 50%;
          width: 80%;
          height: 80%;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
        .box {
          width: 100px;
          height: 100px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          &::before {
            position: absolute;
            top: 50%;
            left: 0%;
            transform: translateY(-50%);

            content: "";
            width: 25px;
            height: 5px;
            background: #fff;
          }
          &::after {
            position: absolute;
            top: 50%;
            right: 0%;
            transform: translateY(-50%);

            content: "";
            width: 25px;
            height: 5px;
            background: #fff;
          }
        }

        .box1 {
          position: absolute;
          width: 50px;
          height: 50px;
          border: 8px solid #fff;
          border-radius: 50%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          &::before {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            content: "";
            width: 15px;
            height: 15px;
            background: #fff;
          }
        }

        .box2 {
          width: 60px;
          height: 60px;
          background-color: #489bcd;
          z-index: 1;
          border-radius: 45px;
          position: absolute;
          top: -50%;
          left: 50%;
          transform: translate(-50%, 50%);
        }
        .line {
          display: inline-block;
          transform: rotateZ(var(--deg));
          // position: absolute;
          position: absolute; /* 让刻度绝对定位 */
          left: 50%;
          top: 0%;
          transform-origin: 0px 50%; /* 设置刻度旋转基点 为圆心*/

          &::before {
            position: absolute;
            content: "";
            width: 2px;
            height: 10px;
            background: #86f2f9;
            top: 0;
            left: 0;
            margin-top: 2px;
          }
        }
      }
    }
    .model {
      width: calc(100% - 800px - 420px);
      display: flex;
      .left {
        width: 50%;

        display: flex;
        justify-content: space-around;
        flex-direction: column;
        .item {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-around;
          margin-bottom: 10px;
          .name {
            width: 80px;
          }
          :deep(.el-select) {
            width: 160px;
            .el-select__wrapper {
              height: 30px !important;
              background: #000;
              border: none;
              box-shadow: none;
              border-bottom-right-radius: 0;
              border-radius: 0;
              border-right: 1px solid #000;
              border: 2px solid #575757;
              .el-select__selected-item {
                color: #fff !important;
              }
              .is-transparent {
                color: #b9c4c4 !important;
              }
            }
          }
          :deep(.el-input) {
            width: 160px;

            .el-input__wrapper {
              height: 30px !important;
              background: #000;

              // border: none;
              box-shadow: none;
              // box-shadow: 1px 1px 1px 1px  #424242,;
              border-radius: 0;

              border: 2px solid #575757;

              .el-input__inner {
                color: #fff;
              }
            }
          }
          .button {
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            border-radius: 5px;
            background: #42536d;
          }
        }
      }
      .right {
        width: 50%;

        align-items: center;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        .item {
          width: 100px;
          text-align: center;
          flex-shrink: 0;
          height: 30px;
          line-height: 30px;
          padding: 0 10px;
          border-radius: 5px;
          background: #42536d;
          margin-right: 20px;
          border-radius: 5px;
        }
        .ks {
          background: #9e5a13;
          // #00FFFF
        }
        .active {
          border: 1px solid #00ffff;
        }
      }
    }
  }
}

.panel {
  position: absolute;
  top: calc(50% - 100px);
  left: 45%;
  width: 150px;
  height: 150px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(25, 186, 136, 0.17);
  padding: 20px;
}

.panel-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.panel-footer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  content: "";
}

.panel-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  content: "";
}

.panel::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  content: "";
}

.panel::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  content: "";
}
</style>
